import React, { Component } from "react";
import { Row, Col } from "antd";
import PropTypes from "prop-types";
import { FormattedMessage } from "react-intl";
import messages from "@i18n/messages";
import { createInputNumber } from "../factory";

class TableProperties extends Component {
  static propTypes = {
    data: PropTypes.object.isRequired,
    node: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    onUpdate: PropTypes.func.isRequired,
  };

  render() {
    const { data, onChange, onUpdate } = this.props;
    const getOptions = property => ({
      size: "small",
      onChange,
      onEnter: onUpdate,
      data,
      property,
      getter: (data, property) => data.get(property),
    });
    return (
      <>
        <Row className="row">
          <Col span={10}>
            <div className="label">
              <FormattedMessage {...messages.propertyRowheight} />
            </div>
          </Col>
          <Col span={14}>{createInputNumber(getOptions("rowHeight"))}</Col>
        </Row>
        <Row className="row">
          <Col span={10}>
            <div className="label">
              <FormattedMessage {...messages.propertyColumnwidth} />
            </div>
          </Col>
          <Col span={14}>{createInputNumber(getOptions("columnWidth"))}</Col>
        </Row>
        {/* <Row className="row">
          <Col span={10}>
            <div className="label">
              <FormattedMessage {...messages.propertyRowcount} />
            </div>
          </Col>
          <Col span={14}>{createInputNumber(getOptions("rowCount"))}</Col>
        </Row>
        <Row className="row">
          <Col span={10}>
            <div className="label">
              <FormattedMessage {...messages.propertyColumncount} />
            </div>
          </Col>
          <Col span={14}>{createInputNumber(getOptions("columnCount"))}</Col>
        </Row> */}
      </>
    );
  }
}

export default TableProperties;
